<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/facelets/templateNada.xhtml"> 

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>

				<h:form id="form" enctype="multipart/form-data">

					<p:wizard flowListener="#{infoSolicitanteView.onFlowProcess}"
						nextLabel="Siguiente" backLabel="Anterior">
						<p:tab id="tabInfoSolicitud" title="Datos Personales">
							<p:panel header="Datos Personales">

								<p:growl id="msg2" />

								<h:panelGrid columns="3" id="panel" style="margin: 0 auto">

									<h:outputText id="msgTipoD" value=" Tipo de Documento: *" />
									<p:selectOneMenu id="txtTipoDoc"
										binding="#{infoSolicitanteView.txtIdTpDoc_TipoDocumento}"
										style="width:100%" required="true"
										requiredMessage="Seleccion requerida Tipo Documento">
										<f:selectItem itemLabel="Seleccionar" itemValue="" />
										<f:selectItems value="#{infoSolicitanteView.tipoDocumento}" />
									</p:selectOneMenu>
									<p:message for="txtTipoDoc" display="icon" />

									<h:outputText id="msgNumeroIdentificacion"
										value=" Numero Identificación:*" />
									<p:inputText id="txtNumeroIdentificacion" required="true"
										requiredMessage="El Número de Identificación es requerido"
										binding="#{infoSolicitanteView.txtNumeroIdentificacion}" />
									<p:message for="txtNumeroIdentificacion" display="icon" />

									<h:outputText id="msgNombreContacto" value=" Nombre Contacto:*" />
									<p:inputText id="txtNombreContacto" required="true"
										requiredMessage="El Nombre del Contacto es requerido"
										binding="#{infoSolicitanteView.txtNombreContacto}" />
									<p:message for="txtNombreContacto" display="icon" />

									<h:outputText id="msgNombreEmpresa" value=" Nombre Empresa:" />
									<p:inputText id="txtNombreEmpresa"
										binding="#{infoSolicitanteView.txtNombreEmpresa}" />
									<p:message for="txtNombreEmpresa" display="icon" />

									<h:outputText id="msgCorreoElectronico"
										value=" CorreoElectronico:*" />
									<p:inputText id="txtCorreoElectronico" required="true"
										requiredMessage="El Correo Electronico es requerido"
										validatorMessage="Email Invalido"
										binding="#{infoSolicitanteView.txtCorreoElectronico}">
										<f:validateRegex
											pattern="^[_A-Za-z0-9-\+\ñ\Ñ\á-ú\Á-Ú]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
									</p:inputText>
									<p:message for="txtCorreoElectronico" display="icon" />

									<h:outputText id="msgNumeroCelular" value=" Numero Celular:" />
									<p:inputMask id="txtNumeroCelular" mask="9999999999?999"
										binding="#{infoSolicitanteView.txtNumeroCelular}" />
									<p:message for="txtNumeroCelular" display="icon" />

									<h:outputText id="msgTelefonoFijo" value=" Telefono Fijo:" />
									<p:inputMask id="txtTelefonoFijo" mask="9999999?999"
										binding="#{infoSolicitanteView.txtTelefonoFijo}" />
									<p:message for="txtTelefonoFijo" display="icon" />

								</h:panelGrid>

							</p:panel>
						</p:tab>


						<p:tab id="idInstructivo" title="Instructivo">
							<p:panel header="Instructivo">

								<h:panelGrid columns="1" id="panelIns" style="margin: 0 auto">

									<h:outputText id="msgAveria" value=" Fantante ó Averia:" />
									<p:inputTextarea id="txtAveria" readonly="true"
										autoResize="false" style="width:600px"
										binding="#{infoSolicitanteView.txtAveria}" />


									<h:outputText id="msgSolicitud"
										value=" Solicitud ó Reclamación:" />
									<p:inputTextarea id="txtSolicitud" readonly="true"
										autoResize="false" style="width:600px"
										binding="#{infoSolicitanteView.txtSolicitud}" />

								</h:panelGrid>
							</p:panel>
						</p:tab>

						<p:tab id="idTipo" title="Tipo PQR">
							<p:panel header="Seleccione el Tipo PQR">
							
							<p:growl id="msg" />

								    <b/>
								    <b/>
								<h:panelGrid columns="2" id="panelTipo" style="margin: 0 auto">

									<p:selectOneRadio id="idOne" binding="#{infoSolicitanteView.txtTipoPQR}" 
									required="true" requiredMessage="Seleccione Tipo de PQR">
									 <p:ajax event="change" listener="#{infoSolicitanteView.listenerTipo}" update="form:tablaAnexos, form:soliRealizar"/>
									 <f:selectItems value="#{infoSolicitanteView.dataTipoSolicitud}" var="tipo" itemLabel="#{tipo.descTpSol}" itemValue="#{tipo.idTpSolPqr}"/>
									</p:selectOneRadio>
									<p:message for="idOne" display="icon" />

								</h:panelGrid>
									<b/>
									<b/>
							</p:panel>
						</p:tab>
						
						<p:tab id="idEnviar" title="Enviar">
							<p:panel header="Enviar PQR">
							
							<p:growl id="msgFinal" autoUpdate="true" />
							
							    <h:panelGrid columns="2" id="panelEnviar" style="margin: 0 auto">
								
								<h:outputText id="msgNombreCliente" value=" Nombre del Contacto:" />
									<p:inputText id="txtNombreCliente" readonly="true"
										binding="#{infoSolicitanteView.txtNombreCliente}" style="width:600px"/>								

                                 <br/>

								</h:panelGrid>
								
								<h:panelGrid columns="2" id="soliRealizar" style="margin: 0 auto" rendered="#{infoSolicitanteView.renderSoliRealizar}">
								
								<h:outputText id="msgSoliARe" value=" Solicitud a Realizar:" />
									<p:inputTextarea id="txtSolicitudARe" 
										binding="#{infoSolicitanteView.txtSoliRealizar}" style="width:600px"/>								

                                 <br/>

								</h:panelGrid>
								
							     <h:panelGrid columns="2" id="panelEnviars" style="margin: 0 auto" cellpadding="2" border="2">
								
								<h:outputText value=" Motivos de Solicitud:" />
								<h:outputText value=" Motivos de Reclamación:" />
								
								  <p:selectManyCheckbox id="idMotS" value="#{infoSolicitanteView.selectedMotSolicitud}"  
									 requiredMessage="Seleccione Motivo Solicitud" layout="grid" columns="1">
									 <f:selectItems value="#{infoSolicitanteView.motivoSolicitud}" var="motivo" itemLabel="#{motivo.descripcionMotSol}" itemValue="#{motivo.idMotSol}"/>
								  </p:selectManyCheckbox>								
																
									<p:selectManyCheckbox id="idMotR" value="#{infoSolicitanteView.selectedMotReclamo}" 
									 requiredMessage="Seleccione Motivo Reclama" layout="grid" columns="1">
									 <f:selectItems value="#{infoSolicitanteView.motivosReclamo}" var="motivo" itemLabel="#{motivo.descripcionMotRecl}" itemValue="#{motivo.idMotRecl}"/>
									</p:selectManyCheckbox>
								
								</h:panelGrid>
							
                                <br/>

                                <h:panelGrid columns="1" id="panelEnviar3" style="margin: 0 auto;">
                                
								  <h:outputText id="msgDescrip" value=" BREVE DESCRIPCION DEL CASO:" />
								  <p:inputTextarea id="txtDescripcionBreve" required="true" requiredMessage="Escriba descripción de caso"
										autoResize="false" style="width:850px;" maxlength="2000"
										binding="#{infoSolicitanteView.txtDescripcion}" />
								  
								   <br/>
								
								  <h:outputText id="msTituloAnexos" value=" Para reclamaciones favor anexar los siguientes documentos:" />

								    <br/>
								    <br/>
								   
								   <h2>Tipo de Archivos Permitidos  (gif|jpe?g|png|pdf|xps)</h2>
								   <br/>
								
								<p:dataTable value="#{infoSolicitanteView.anexos}" var="anexoDTO"
								id="tablaAnexos">
								<p:column headerText="Descripción Anexo">
									<h:outputText value="#{anexoDTO.descripcionAnexo}" />
								</p:column>

								<p:column headerText="Archivo">
									<p:fileUpload id="upload" required="true"
										requiredMessage="No ha seleccianado ningun archivo"
										fileUploadListener="#{infoSolicitanteView.handleFileUpload}"  
										cancelLabel="Cancelar" uploadLabel="Adjuntar"
										label="Seleccionar" mode="advanced" dragDropSupport="false"
										sizeLimit="10000000" fileLimit="1" update=":form:msgFinal, check"
										allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|xps)$/"
										invalidSizeMessage="Archivo muy pesado"
										fileLimitMessage="El limite de Archivos adjuntos es 1"
										invalidFileMessage="El archivo adjuntado no es compatible" />

								</p:column>

								<p:column headerText="Adjuntado?">
									<p:selectBooleanCheckbox id="check" disabled="true"
										binding="#{infoSolicitanteView.check}" />
								</p:column>
							</p:dataTable>
						</h:panelGrid>
						
						 <h:panelGrid columns="1" style="margin: 0 auto;">
						 
						 <p:commandButton id="btnSave" value="Enviar Solicitud"
							action="#{infoSolicitanteView.guardarTodo}" icon="ui-icon-disk" />	
						 
						 </h:panelGrid>
											
		
							</p:panel>
						</p:tab>

					</p:wizard>
										
					 <h:panelGrid columns="1" style="margin: 0 auto;">
						 
								<p:commandButton id="btnLimpiar" value="Limpiar"
									icon="ui-icon-close"
									process="@this"
									action="/PQR/infoSolicitante.xhtml?faces-redirect=true">
								</p:commandButton>
						 
						 </h:panelGrid>

				</h:form>

			</f:view>
		</ui:define>

	</ui:composition>

</h:body>

</html>